import React from 'react';
import {Form, Input, Button, Checkbox, message} from 'antd';
import {UserOutlined, LockOutlined} from '@ant-design/icons';
import style from './Login.module.scss'
import Particles from 'react-tsparticles';
import axios from "axios";

export default function Login(props) {

    const onFinish = (values) => {
        console.log(values)
        // 利用get向后端验证登录信息
        axios.get(`/users?username=${values.username}&password=${values.password}&roleState=true&_expand=role`).then(res => {
            console.log(res.data)

            if (res.data.length === 0) {
                return message.error('账号和密码不匹配')
            } else {
                // 此处将异步变为同步，只有存好了 token 才可以跳转页面，否则会出错
                setTimeout(() => {
                    // 将用户信息存进 localStorage 的 token
                    localStorage.clear()
                    localStorage.setItem('token', JSON.stringify(res.data[0]))
                    props.history.push('/')
                },0)
            }
        })
    }

    return (
        <div className={style.loginBox}>
            <div>
                <Particles height={document.documentElement.clientHeight}
                           options={
                               {
                                   "background": {
                                       "color": {
                                           // "value": "#0d47a1"
                                           "value": "rgb(35, 39, 65)"
                                       },
                                       "position": "50% 50%",
                                       "repeat": "no-repeat",
                                       "size": "cover"
                                   },
                                   "fullScreen": {
                                       "zIndex": 1
                                   },
                                   "interactivity": {
                                       "events": {
                                           "onClick": {
                                               "enable": true,
                                               "mode": "push"
                                           },
                                           "onHover": {
                                               "enable": true,
                                               "mode": "grab",
                                               "parallax": {
                                                   "enable": true,
                                                   "force": 60
                                               }
                                           }
                                       },
                                       "modes": {
                                           "bubble": {
                                               "distance": 400,
                                               "duration": 2,
                                               "opacity": 0.8,
                                               "size": 40
                                           },
                                           "grab": {
                                               "distance": 400
                                           }
                                       }
                                   },
                                   "particles": {
                                       "color": {
                                           "value": "#ffffff"
                                       },
                                       "links": {
                                           "color": {
                                               "value": "#ffffff"
                                           },
                                           "distance": 150,
                                           "enable": true,
                                           "opacity": 0.4
                                       },
                                       "move": {
                                           "attract": {
                                               "rotate": {
                                                   "x": 600,
                                                   "y": 1200
                                               }
                                           },
                                           "enable": true,
                                           "outModes": {
                                               "bottom": "out",
                                               "left": "out",
                                               "right": "out",
                                               "top": "out"
                                           }
                                       },
                                       "number": {
                                           "density": {
                                               "enable": true
                                           }
                                       },
                                       "opacity": {
                                           "random": {
                                               "enable": true
                                           },
                                           "value": {
                                               "min": 0.1,
                                               "max": 0.5
                                           },
                                           "animation": {
                                               "enable": true,
                                               "speed": 3,
                                               "minimumValue": 0.1
                                           }
                                       },
                                       "size": {
                                           "random": {
                                               "enable": true
                                           },
                                           "value": {
                                               "min": 0.1,
                                               "max": 10
                                           },
                                           "animation": {
                                               "enable": true,
                                               "speed": 20,
                                               "minimumValue": 0.1
                                           }
                                       }
                                   }
                               }
                           }/>
            </div>

            <div className={style.loginFormBox}>
                <div className={style.loginTitle}>全球新闻发布管理系统</div>

                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{remember: true}}
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[{required: true, message: '请输入用户名'}]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon"/>} placeholder="用户名"/>
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{required: true, message: '请输入密码'}]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon"/>}
                            type="password"
                            placeholder="密码"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Form.Item name="remember" valuePropName="checked" noStyle>
                            <Checkbox>记住账号</Checkbox>
                        </Form.Item>

                        <a className="login-form-forgot" href="http://localhost:3000/#/home">
                            忘记密码
                        </a>
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                        {/*Or <a href="">注册!</a>*/}
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}